<!--流程业务化-异常解除，包含所有的设备、工装、工具异常-->

<!--用户权限说明-->
<!--管理员：代码：1，可以做所有的操作-->
<!---->
<template>
  <div style="margin: 0;padding: 0">
    <el-container>
      <!--页面表头设计-->
      <el-header style="height: 7vh">
        <el-link class="headMain" href="http://10.255.96.48:3404/">{{main.qualityManagementSystem}}</el-link>
        <span class="center-text">{{main.alarmRelease}}</span>
        <el-popover
            placement="top-start"
            title="用户信息"
            width="200"
            trigger="hover">
          <div style="margin-top: 10px">Name：{{useName}}</div>
          <div style="margin-top: 10px">ID:{{useId}}</div>
          <div style="margin-top: 10px" @click="logOut"><el-link>退出</el-link></div>
          <div class="headMain" slot="reference">{{useName}}</div>
        </el-popover>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <div style="margin-top:10px;">
            <el-button style="width: 100%"
                       :style="{backgroundColor:buttonBackColor1,color:buttonColor1}"
                       @click="buttonMainSelect(1)">所有环节</el-button>
          </div>
          <div style="margin-top:10px;" >
            <el-button style="width: 100%"
                       :style="{backgroundColor:buttonBackColor2,color:buttonColor2}"
                       @click="buttonMainSelect(2)">装配车间</el-button>
          </div>
          <div style="margin-top:10px;">
            <el-button style="width: 100%"
                       :style="{backgroundColor:buttonBackColor3,color:buttonColor3}"
                       @click="buttonMainSelect(3)">机加车间</el-button>
          </div>
          <div style="margin-top:10px;">
            <el-button style="width: 100%"
                       :style="{backgroundColor:buttonBackColor4,color:buttonColor4}"
                       @click="buttonMainSelect(4)">其他环节</el-button>
          </div>
        </el-aside>
        <el-container>
          <!--主题设计-->
          <el-main style="height: 79vh;overflow: auto">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="报警/故障问题清单" name="exception">
                <div style="margin-bottom: 5px;text-align: right">
                  <span style="font-size: 14px;margin-right: 5px">班次筛选：</span>
                  <el-date-picker
                      v-model="dateOneDay"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      size="mini"
                      style="width: 130px">
                  </el-date-picker>
                  <el-select v-model="shiftType" placeholder="请选择" style="width: 70px;margin-left: 5px" size="mini">
                    <el-option
                        v-for="item in shiftOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                  <span style="font-size: 14px;margin-right: 5px;margin-left: 5px">时间筛选：</span>
                  <el-date-picker
                      v-model="dateTimeScope"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      size="mini"
                      style="margin-right: 10px"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
                  <el-button size="mini" @click="editExceptionShow(1,null)">添加</el-button>
                </div >
                <el-table
                    :data="exceptionData"
                    border
                    style="width: 100%;"
                    height="64vh">
                  <el-table-column type="expand"
                      v-slot:default="scope">
                    <el-descriptions title="其他信息：" border :column="4">
                      <el-descriptions-item label="停机时间：">{{scope.row.downTimeOp}}</el-descriptions-item>
                      <el-descriptions-item label="停线时间：">{{scope.row.downTimeLine}}</el-descriptions-item>
                      <el-descriptions-item label="报警人：">{{scope.row.excPersonName}}</el-descriptions-item>
                      <el-descriptions-item label="解除人：">{{scope.row.liftName}}</el-descriptions-item>
                      <el-descriptions-item label="恢复类型：">{{scope.row.restorationType}}</el-descriptions-item>
                    </el-descriptions>
                  </el-table-column>
                  <el-table-column
                      prop="op"
                      label="工序号"
                      width="80">
                  </el-table-column>
                  <el-table-column
                      prop="excMessage"
                      label="报警信息"
                      :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column
                      prop="partId"
                      label="发动机号"
                      width="180">
                  </el-table-column>
                  <el-table-column
                      prop="excDate"
                      label="报警时间"
                      width="160">
                  </el-table-column>
                    <el-table-column
                        prop="isProductionOk"
                        label="是否合格"
                        width="100">
                    </el-table-column>
                  <el-table-column
                      prop="isProblem"
                      label="问题进展"
                      v-slot:default="scope"
                      width="80">
                    <el-link v-if="scope.row.isProblem===0">未结题</el-link>
                    <el-link v-if="scope.row.isProblem===1">已结题</el-link>
                    <el-link v-if="scope.row.isProblem===2">挂起</el-link>
                  </el-table-column>
                  <el-table-column
                      prop=""
                      label="编辑"
                      width="80"
                      v-slot:default="scope">
                    <el-link @click="editExceptionShow(2,scope)" style="margin-right: 8px"><i class="el-icon-edit"></i></el-link>
                    <el-link @click="editExceptionShow(3,scope)"><i class="el-icon-delete"></i></el-link>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="报警/故障分析" name="exceptionAnalysis">
                <div style="text-align: left;overflow-y: auto;height: 63vh" >
                  <span>选择范围各工序报警数量：</span>
                  <div style="margin-bottom: 5px;text-align: right">
                    <span style="font-size: 14px;margin-right: 5px">班次筛选：</span>
                    <el-date-picker
                        v-model="dateOneDay"
                        type="date"
                        placeholder="选择日期"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        size="mini"
                        style="width: 130px">
                    </el-date-picker>
                    <el-select v-model="shiftType" placeholder="请选择" style="width: 70px;margin-left: 5px" size="mini">
                      <el-option
                          v-for="item in shiftOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                    <span style="font-size: 14px;margin-right: 5px;margin-left: 5px">时间筛选：</span>
                    <el-date-picker
                        v-model="dateTimeScope"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="mini"
                        style="margin-right: 10px"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                  </div >
                  <div  ref="stationNub" style="width: 82vw;height: 250px;margin-top: 5px;border: 1px solid blue;"></div>
                  <span>选择范围各工序报警解除完成数量：</span>
                  <div  ref="stationNubFinish" style="width: 82vw;height: 250px;margin-top: 5px;border: 1px solid blue;"></div>
                  <span>各工序报警趋势图：</span>
                  <div style="margin-bottom: 5px;text-align: right">
                    <span style="font-size: 14px;margin-right: 5px;margin-left: 5px">工序号：</span>
                    <el-select v-model="opType" placeholder="请选择" style="width: 90px;margin-left: 5px" size="mini">
                      <el-option
                          v-for="item in op"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                    <span style="font-size: 14px;margin-right: 5px;margin-left: 5px">时间筛选：</span>
                    <el-date-picker
                        v-model="dateTimeScopeOp"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="mini"
                        style="margin-right: 10px"
                        format="yyyy-MM-dd 08:20:00"
                        value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                  </div >
                  <div  ref="stationNubOp" style="width: 82vw;height: 250px;margin-top: 5px;border: 1px solid blue;"></div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="报警/故障类型清单"></el-tab-pane>
              <el-tab-pane label="模型说明" name="third">
                <div style="display: flex; gap: 10px">
                  <el-card shadow="hover" style="width: 120px">报警/异常开始</el-card>
                  <el-card shadow="hover" style="width: 120px"><span style="color: red">报警解除</span></el-card>
                  <el-card shadow="hover" style="width: 120px">原工艺恢复</el-card>
                  <el-card shadow="hover" style="width: 120px">班长前后5件确认</el-card>
                  <el-card shadow="hover" style="width: 120px">检验前后5件确认<i class="el-icon-right"></i></el-card>
                  <el-card shadow="hover" style="width: 120px">异常进入可疑品管理</el-card>
                </div>
                <div style="display: flex; gap: 10px;margin-top: 10px">
                  <el-card shadow="hover" style="width: 120px;margin-left: 265px">使用ByPass</el-card>
                  <el-card shadow="hover" style="width: 120px">班长前后5件确认</el-card>
                  <el-card shadow="hover" style="width: 120px">检验前后5件确认</el-card>
                  <el-card shadow="hover" style="width: 120px">异常进入可疑品管理</el-card>
                  <el-card shadow="hover" style="width: 120px">下发变化点</el-card>
                  <el-card shadow="hover" style="width: 120px">按照变化点管理</el-card>
                </div>
                <div style="display: flex; gap: 10px;margin-top: 10px">
                  <el-card shadow="hover" style="width: 120px;margin-left: 135px">可疑品处理</el-card>
                  <el-card shadow="hover" style="width: 120px">可疑品判定</el-card>
                  <el-card shadow="hover" style="width: 120px">产品返工：</el-card>
                  <el-card shadow="hover" style="width: 120px">下发返工要领</el-card>
                  <el-card shadow="hover" style="width: 120px">返工实施</el-card>
                  <el-card shadow="hover" style="width: 120px">产品判定</el-card>
                  <el-card shadow="hover" style="width: 120px">产品装机</el-card>
                </div>
                <div style="display: flex; gap: 10px;margin-top: 10px">
                  <el-card shadow="hover" style="width: 120px;margin-left: 400px">产品报废：</el-card>
                  <el-card shadow="hover" style="width: 120px">产品开票</el-card>
                  <el-card shadow="hover" style="width: 120px">产品退库</el-card>
                  <el-card shadow="hover" style="width: 120px">产品报废</el-card>
                </div>
                <div style="display: flex; gap: 10px;margin-top: 10px">
                  <el-card shadow="hover" style="width: 120px;margin-left: 400px">产品退供方：</el-card>
                  <el-card shadow="hover" style="width: 120px">产品开票</el-card>
                  <el-card shadow="hover" style="width: 120px">产品退库</el-card>
                  <el-card shadow="hover" style="width: 120px">产品退供方</el-card>
                </div>
                <div style="display: flex; gap: 10px;margin-top: 10px">
                  <el-card shadow="hover" style="width: 120px;margin-left: 135px">可疑品追溯</el-card>
                  <el-card shadow="hover" style="width: 120px">判定是否追溯</el-card>
                  <el-card shadow="hover" style="width: 120px">需要追溯</el-card>
                  <el-card shadow="hover" style="width: 120px">下发追溯方案</el-card>
                  <el-card shadow="hover" style="width: 120px">实施追溯</el-card>
                  <el-card shadow="hover" style="width: 120px">追溯总结</el-card>
                </div>
                <div style="display: flex; gap: 10px;margin-top: 10px">
                  <el-card shadow="hover" style="width: 120px;margin-left: 135px">问题解决</el-card>
                  <el-card shadow="hover" style="width: 120px">原因分析</el-card>
                  <el-card shadow="hover" style="width: 120px">对策实施</el-card>
                  <el-card shadow="hover" style="width: 120px">效果验证</el-card>
                  <el-card shadow="hover" style="width: 120px">横展</el-card>
                  <el-card shadow="hover" style="width: 120px">需追究供方责任</el-card>
                  <el-card shadow="hover" style="width: 120px">发起索赔</el-card>
                  <el-card shadow="hover" style="width: 120px">实施索赔</el-card>
                  <el-card shadow="hover" style="width: 120px">索赔完结</el-card>
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-main>
          <el-footer>
            <el-button plain size="small" @click="chooseLanguage('chinese')">中  文</el-button>
            <el-button plain size="small" @click="chooseLanguage('russian')">Русский язык</el-button>
            <el-button plain size="small" @click="chooseLanguage('english')">English</el-button>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>

    <!--弹窗放置区-->
    <!--新增一个报警、异常解除信息的弹窗-->
    <el-dialog
        :title="titleUse"
        :visible.sync="exceptionDialog"
        width="650px"
        :before-close="handleClose">
      <el-form ref="suspectListForm" :inline="true" :model="exceptionForm" label-width="100px">
        <div>
          <el-form-item label="车间名称：">
            <el-select v-model="exceptionForm.workShop" filterable clearable placeholder="请选择类别" style="margin-left: 10px;width: 450px">
              <el-option
                  v-for="item in optionWorkshopNew"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="线体名称：">
            <el-select v-model="exceptionForm.lineName" filterable clearable placeholder="请选择类别" style="margin-left: 10px;width: 450px">
              <el-option
                  v-for="item in lineName"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工序号：">
            <el-select v-model="exceptionForm.op" filterable clearable placeholder="请选择类别" style="width: 175px">
              <el-option
                  v-for="item in op"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="反馈人：">
            <el-input v-model="exceptionForm.excPersonName" style="width: 175px"></el-input>
          </el-form-item>
          <el-form-item label="发生时间:" label-width="100px">
              <el-date-picker
                  v-model="exceptionForm.excDate"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format="YYYY-MM-dd HH:mm:ss"
                  style="width: 450px">
              </el-date-picker>
          </el-form-item>
          <el-form-item label="停机时间:" label-width="100px">
            <el-input-number v-model="exceptionForm.downTimeOp" style="width: 175px"></el-input-number>
          </el-form-item>
          <el-form-item label="停线时间：">
            <el-input-number v-model="exceptionForm.downTimeLine" style="width: 175px"></el-input-number>
          </el-form-item>
          <el-form-item label="报警信息:">
            <el-input v-model="exceptionForm.excMessage"
                      type="textarea"
                      :rows="2"
                      placeholder="请输入内容"
                      style="width: 450px"></el-input>
          </el-form-item>
        </div>
        <el-button @click="exceptionDialog=false">取 消</el-button>
        <el-button type="primary" @click="exceptionEdit">确 定</el-button>
      </el-form>
    </el-dialog>
    <!--抽屉放置区域-->
    <!--问题解决的抽屉-->
  </div>
</template>

<script>
import {OpAssemblyOil, opList, optionWorkshopNew,} from "@/configUse";
import _ from "lodash";
import * as echarts from "echarts";

export default {
  name: "workExceptionRemoval",
  components: {},
  data() {
    return {
      activeName: 'exception',
      //用户权限相关的变量
      useName: '',//用户名称
      useId: '',//用户编号
      usePower: '',//用户权限

      //记录语言选择
      languageS: 'chinese',
      main:{
        qualityManagementSystem:'俄动力质量管理系统',
        alarmRelease:'报警/故障解除业务'
      },


      buttonDoe: 1,//用户选择的是那个按钮
      buttonBackColor1: 'blue',//按钮的背景颜色
      buttonColor1: 'white',//按钮的字体颜色
      buttonBackColor2: '',//按钮的背景颜色
      buttonColor2: '',//按钮的字体颜色
      buttonBackColor3: '',//按钮的背景颜色
      buttonColor3: '',//按钮的字体颜色
      buttonBackColor4: '',//按钮的背景颜色
      buttonColor4: '',//按钮的字体颜色
      optionWorkshopNew: optionWorkshopNew,//记录车间名称的选择器
      lineName: [],//记录线体名称的选择器
      op: opList,//记录工序号的选择器
      //记录的是报警问题的列表
      exceptionData: [
        {
          id: null,//主键
          establishTime: '',//创建时间
          updateTime: '',//修改时间
          deleteSign: '',//删除标记
          editName: '',//编辑人

          workShop: '',//车间名称，三种语言
          lineName: '',//线体名称
          op: '',//工序号
          excMessage: '',//报警信息
          excDate: '',//报警时间
          excPersonName: '',//报警反馈人
          excType: '',//报警类别
          isProblem: -1,//-1代表，没有完结，0代表问题没有关闭；1代表问题关闭
          downTimeOp: 0,//停机时间
          downTimeLine: 0,//停线时间
          partId:'',//零部件号

          liftName:'',//解除人姓名
          restorationType:'',//恢复类型
          isProductionOk:'',//产品是否合格

          create_time: '',             // 创建时间
          update_time: '',             // 最后更新时间
          creator: '',                 // 创建人
          process_status: '',          // 处理状态
          sys_update_user: '',         // 系统更新人
          sys_audit_user: '',          // 系统审核人
          sys_audit_time: '',          // 系统审核时间
          sys_deleted: 0               // 系统删除标记（0未删除，1已删除）
        },
      ],//记录的事报警、异常解除的大表数据
      exceptionDataScope: null,//记录的是用户点击的哪一行报警、故障行
      exceptionForm: {
        id: null,//主键
        establishTime: '',//创建时间
        updateTime: '',//修改时间
        deleteSign: '',//删除标记
        editName: '',//编辑人

        workShop: '',//车间名称，三种语言
        lineName: '',//线体名称
        op: '',//工序号
        excMessage: '',//报警信息
        excDate: '',//报警时间
        excPersonName: '',//报警反馈人
        excType: '',//报警类别
        isProblem: -1,//-1代表，没有完结，0代表问题没有关闭；1代表问题关闭
        downTimeOp: 0,//停机时间
        downTimeLine: 0,//停线时间

        liftName:'',//解除人姓名
        restorationType:'',//恢复类型
        isProductionOk:'',//产品是否合格

        create_time: '',             // 创建时间
        update_time: '',             // 最后更新时间
        creator: '',                 // 创建人
        process_status: '',          // 处理状态
        sys_update_user: '',         // 系统更新人
        sys_audit_user: '',          // 系统审核人
        sys_audit_time: '',          // 系统审核时间
        sys_deleted: 0               // 系统删除标记（0未删除，1已删除）
      },//用户编辑某一行用到的数据
      exceptionDoe: null,//用户要对报警问题的进行什么操作：1.新增；2.编辑；3.删除；

      //页面用到的变量：用户选择看是那一段的报警信息
      dateTimeScope:'',
      //页面用到的变量：用户需要看工序和一段时间的报警信息
      dateTimeScopeOp:'',
      //页面用到的变量：用户选择的是哪一天的报警信息
      dateOneDay:'',
      //页面用到的变量：用户选择的是那个班次
      shiftType:'',
      //筛选工序
      opType:'',

      //选择器的变量
      //选择班次
      shiftOptions:[
        {value:'早班/morning Shift/Ранняя смена',label:'早班/morning Shift/Ранняя смена'},
        {value:'中班/middle shift/Средний класс',label:'中班/middle shift/Средний класс'},
        {value:'夜班/night shift/Ночная работа',label:'夜班/night shift/Ночная работа'},
      ],
      //工序选择器
      opOptions:OpAssemblyOil,

      //报警故障类型清单总表；这个表需要走《基础维护》的接口，在这页上不能进行编辑，只能进行查看，这个表也不需要低代码进行维护
      exceptionTypeData: [{
        id: null,//主键
        establishTime: '',//创建时间
        updateTime: '',//修改时间
        deleteSign: '',//删除标记
        editName: '',//编辑人
        workShop: '',//车间名称，三种语言
        lineName: '',//线体名称
        op: '',//工序号
        excMessage: '',//报警信息
        excId: '',//报警代码
        plcId: '',//plc信号代码
        plcAddress: '',//PLC地址
        downTimeOp: 0,//停机时间
        downTimeLine: 0,//停线时间
      }],

      //弹窗控制的变量
      //控制弹窗的提示：
      titleUse:'',
      //增加、编辑异常的弹窗
      exceptionDialog:false,

      //画图相关的变量
      //根据用户选择的日期，画这段时间内各工序的报警排序
      stationNub:null,
      //根据用户现在的日期，画这段时间内各工序的报警解除记录数据
      stationNubFinish:null,
      //根据用户选择，画出某一序的报警趋势
      stationNubOp:null,
    }
  },
  watch: {
    //页面用到的变量：用户选择看是那段时间的的报警信息
    // eslint-disable-next-line no-unused-vars
    dateTimeScope(newVal, oldVal) {
      if (this.dateTimeScope.length > 0) {
        //归零按照班次选择的项目
        this.shiftType = '';
        this.dateOneDay = '';
        this.queryExceptionOneFiledScopeWorkExceptionRemoval('excDate', newVal[0], newVal[1]).then(data => {
          this.exceptionData = data;
          //画出故障总的趋势图
          let chartStationNub = {
            title: {
              textStyle: {
                color: '#333',
                fontSize: 14
              },
              x: 'center',
              text: this.dateTimeScope[0] + '——' + this.dateTimeScope[1] + '报警数量趋势图',
            },
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                rotate: 45,
                fontSize: 11
              }
            },
            yAxis: {
              type: 'value',
              min: 0,
              max: 10,
              axisLabel: {
                formatter: '{value}'
              }
            },
            series: [
              {
                name: '故障数量',
                type: 'bar',
                data: [],
                itemStyle: {
                  color: '#1890ff'
                },
                lineStyle: {
                  width: 2,
                  type: 'dashed'
                },
                label: {
                  show: true,
                  position: 'top',
                  color: '#333',
                  fontSize: 11,
                  formatter: '{c}'
                }
              }
            ],
            grid: {
              top: '6%',
              left: '3%',
              right: '4%',
              bottom: '0%',
              containLabel: true
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            legend: {
              data: ['数量'],
              left: 'right',
              top: '0%',
              itemGap: 20,
              textStyle: {
                color: '#333',
                fontSize: 11
              }
            },
            toolbox: {
              feature: {
                saveAsImage: {
                  type: 'png',
                  name: '报警数量趋势图',
                  title: '',
                  pixelRatio: 2,
                  backgroundColor: '#fff',
                  excludeComponents: ['toolbox']
                },
                myCopy: {
                  show: true,
                  title: '',
                  icon: 'path://M4 7v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V7h-2v10H6V7H4zm6-5.5L17 7h-3v3h-4V7H7l7-5.5z',
                  onclick: async () => {
                    if (!this.stationNub) {
                      alert('图表未初始化');
                      return;
                    }
                    // 清除选中状态
                    this.stationNub.dispatchAction({
                      type: 'unselect',
                      seriesIndex: 0
                    });

                    const dataUrl = this.stationNub.getDataURL({
                      type: 'png',
                      pixelRatio: 2,
                      backgroundColor: '#fff'
                    });

                    try {
                      // 将 DataURL 转换为 Blob
                      const response = await fetch(dataUrl);
                      const blob = await response.blob();

                      // 使用 Clipboard API 复制图片
                      await navigator.clipboard.write([
                        new ClipboardItem({
                          [blob.type]: blob
                        })
                      ]);
                      this.$message.success('已复制');
                    } catch (err) {
                      this.$message.success('复制失败');
                    }
                  }
                }
              },
              right: '0%',
              top: '90%',
              itemSize: 14,
              itemGap: 10,
              textStyle: {
                fontSize: 11
              },
              iconStyle: {
                borderColor: '#666',
                borderWidth: 1,
                backgroundColor: '#f5f5f5'
              }
            }
          };
          let stationNubFinish= {
            title: {
              textStyle: {
                color: '#333',
                fontSize: 14
              },
              x: 'center',
              text: this.dateTimeScope[0] + '——' + this.dateTimeScope[1] + '报警数量趋势图',
            },
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                rotate: 45,
                fontSize: 11
              }
            },
            yAxis: {
              type: 'value',
              min: 0,
              max: 10,
              axisLabel: {
                formatter: '{value}'
              }
            },
            series: [
              {
                name: '全天数量',
                type: 'bar',
                data: [],
                itemStyle: {
                  color: '#1890ff'
                },
                lineStyle: {
                  width: 2,
                  type: 'dashed'
                },
                label: {
                  show: true,
                  position: 'top',
                  color: '#333',
                  fontSize: 11,
                  formatter: '{c}'
                }
              },
              {
                name: '记录数量',
                type: 'bar',
                data: [],
                itemStyle: {
                  color: '#5470C6'
                },
                lineStyle: {
                  width: 2,
                  type: 'dashed'
                },
                label: {
                  show: true,
                  position: 'top',
                  color: '#333',
                  fontSize: 11,
                  formatter: '{c}'
                }
              },
              {
                name: '未记录数量',
                type: 'bar',
                data: [],
                itemStyle: {
                  color: '#91CC75'
                },
                lineStyle: {
                  width: 2,
                  type: 'dashed'
                },
                label: {
                  show: true,
                  position: 'top',
                  color: '#333',
                  fontSize: 11,
                  formatter: '{c}'
                }
              },
            ],
            grid: {
              top: '6%',
              left: '3%',
              right: '4%',
              bottom: '0%',
              containLabel: true
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            legend: {
              data: ['全天数量', '记录数量', '未记录数量'],
              left: 'right',
              top: '0%',
              itemGap: 20,
              textStyle: {
                color: '#333',
                fontSize: 11
              },
              selected: {
                '全天数量': true,
                '记录数量': true,
                '未记录数量': true
              },
              toolbox: {
                feature: {
                  saveAsImage: {
                    type: 'png',
                    name: '报警数量趋势图',
                    title: '',
                    pixelRatio: 2,
                    backgroundColor: '#fff',
                    excludeComponents: ['toolbox']
                  },
                  myCopy: {
                    show: true,
                    title: '',
                    icon: 'path://M4 7v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V7h-2v10H6V7H4zm6-5.5L17 7h-3v3h-4V7H7l7-5.5z',
                    onclick: async () => {
                      if (!this.stationNub) {
                        alert('图表未初始化');
                        return;
                      }
                      // 清除选中状态
                      this.stationNub.dispatchAction({
                        type: 'unselect',
                        seriesIndex: 0
                      });

                      const dataUrl = this.stationNub.getDataURL({
                        type: 'png',
                        pixelRatio: 2,
                        backgroundColor: '#fff'
                      });

                      try {
                        // 将 DataURL 转换为 Blob
                        const response = await fetch(dataUrl);
                        const blob = await response.blob();

                        // 使用 Clipboard API 复制图片
                        await navigator.clipboard.write([
                          new ClipboardItem({
                            [blob.type]: blob
                          })
                        ]);
                        this.$message.success('已复制');
                      } catch (err) {
                        this.$message.success('复制失败');
                      }
                    }
                  }
                },
                right: '0%',
                top: '90%',
                itemSize: 14,
                itemGap: 10,
                textStyle: {
                  fontSize: 11
                },
                iconStyle: {
                  borderColor: '#666',
                  borderWidth: 1,
                  backgroundColor: '#f5f5f5'
                }
              }

            },
          }
          if (this.exceptionData.length > 0) {
            //画出总的报警数量
            const opCountMap = {};
            this.exceptionData.forEach(item => {
              const op = item.op;
              if (opCountMap[op]) {
                opCountMap[op]++;
              } else {
                opCountMap[op] = 1;
              }
            });
            const result = Object.keys(opCountMap).map(op => ({
              op: op,
              nub: opCountMap[op]
            }));
            result.sort((a, b) => b.nub - a.nub);
            for (let i = 0; i < result.length; i++) {
              chartStationNub.xAxis.data.push(result[i].op);
              chartStationNub.series[0].data.push(result[i].nub);
            }
            chartStationNub.yAxis.max = result[0].nub + 1;
            this.$nextTick(() => {
              if (!this.stationNub) {
                this.stationNub = echarts.init(this.$refs.stationNub);
              }
              this.stationNub.setOption(chartStationNub);
            });

            //画出故障报警的解除记录图，分为总数、已登记处理、未登记处理
            //借用上一个数据X轴、变量的总数值
            stationNubFinish.xAxis.data=chartStationNub.xAxis.data
            stationNubFinish.series[0].data = chartStationNub.series[0].data
            stationNubFinish.yAxis.max=chartStationNub.yAxis.max
            //循环，查每一个工序下的数据.
            for (let i = 0; i < stationNubFinish.xAxis.data.length; i++) {
              //筛选数据，并赋值
              let finish= data.filter(item=> item.op===stationNubFinish.xAxis.data[i] && item.liftName==='')
              stationNubFinish.series[2].data.push(finish.length)
              let finishNo= data.filter(item=> item.op===stationNubFinish.xAxis.data[i] && item.liftName!=='')
              stationNubFinish.series[1].data.push(finishNo.length)
            }
            chartStationNub.yAxis.max = result[0].nub + 1;
            this.$nextTick(() => {
              if (!this.stationNubFinish) {
                this.stationNubFinish = echarts.init(this.$refs.stationNubFinish);
              }
              this.stationNubFinish.setOption(stationNubFinish);
            });
          }
          else {
            chartStationNub = {
              title: {
                textStyle: {
                  color: '#333',
                  fontSize: 14
                },
                x: 'center',
                text: this.dateTimeScope[0] + '——' + this.dateTimeScope[1] + '报警数量趋势图',
              },
              xAxis: {
                type: 'category',
                data: [],
                axisLabel: {
                  rotate: 45,
                  fontSize: 11
                }
              },
              yAxis: {
                type: 'value',
                min: 0,
                max: 10,
                axisLabel: {
                  formatter: '{value}'
                }
              },
              series: [
                {
                  name: '故障数量',
                  type: 'bar',
                  data: [],
                  itemStyle: {
                    color: '#1890ff'
                  },
                  lineStyle: {
                    width: 2,
                    type: 'dashed'
                  },
                  label: {
                    show: true,
                    position: 'top',
                    color: '#333',
                    fontSize: 11,
                    formatter: '{c}'
                  }
                }
              ],
              grid: {
                top: '6%',
                left: '3%',
                right: '4%',
                bottom: '0%',
                containLabel: true
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  label: {
                    backgroundColor: '#6a7985'
                  }
                }
              },
              legend: {
                data: ['数量'],
                left: 'right',
                top: '0%',
                itemGap: 20,
                textStyle: {
                  color: '#333',
                  fontSize: 11
                }
              }
            };
            stationNubFinish= {
              title: {
                textStyle: {
                  color: '#333',
                  fontSize: 14
                },
                x: 'center',
                text: this.dateTimeScope[0] + '——' + this.dateTimeScope[1] + '报警数量趋势图',
              },
              xAxis: {
                type: 'category',
                data: [],
                axisLabel: {
                  rotate: 45,
                  fontSize: 11
                }
              },
              yAxis: {
                type: 'value',
                min: 0,
                max: 10,
                axisLabel: {
                  formatter: '{value}'
                }
              },
              series: [
                {
                  name: '全天数量',
                  type: 'bar',
                  data: [],
                  itemStyle: {
                    color: '#1890ff'
                  },
                  lineStyle: {
                    width: 2,
                    type: 'dashed'
                  },
                  label: {
                    show: true,
                    position: 'top',
                    color: '#333',
                    fontSize: 11,
                    formatter: '{c}'
                  }
                },
                {
                  name: '记录数量',
                  type: 'bar',
                  data: [],
                  itemStyle: {
                    color: '#5470C6'
                  },
                  lineStyle: {
                    width: 2,
                    type: 'dashed'
                  },
                  label: {
                    show: true,
                    position: 'top',
                    color: '#333',
                    fontSize: 11,
                    formatter: '{c}'
                  }
                },
                {
                  name: '未记录数量',
                  type: 'bar',
                  data: [],
                  itemStyle: {
                    color: '#91CC75'
                  },
                  lineStyle: {
                    width: 2,
                    type: 'dashed'
                  },
                  label: {
                    show: true,
                    position: 'top',
                    color: '#333',
                    fontSize: 11,
                    formatter: '{c}'
                  }
                },
              ],
              grid: {
                top: '6%',
                left: '3%',
                right: '4%',
                bottom: '0%',
                containLabel: true
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  label: {
                    backgroundColor: '#6a7985'
                  }
                }
              },
              legend: {
                data: ['全天数量', '记录数量', '未记录数量'],
                left: 'right',
                top: '0%',
                itemGap: 20,
                textStyle: {
                  color: '#333',
                  fontSize: 11
                },
                selected: {
                  '全天数量': true,
                  '记录数量': true,
                  '未记录数量': true
                },
                toolbox: {
                  feature: {
                    saveAsImage: {
                      type: 'png',
                      name: '报警数量趋势图',
                      title: '',
                      pixelRatio: 2,
                      backgroundColor: '#fff',
                      excludeComponents: ['toolbox']
                    },
                    myCopy: {
                      show: true,
                      title: '',
                      icon: 'path://M4 7v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V7h-2v10H6V7H4zm6-5.5L17 7h-3v3h-4V7H7l7-5.5z',
                      onclick: async () => {
                        if (!this.stationNub) {
                          alert('图表未初始化');
                          return;
                        }
                        // 清除选中状态
                        this.stationNub.dispatchAction({
                          type: 'unselect',
                          seriesIndex: 0
                        });

                        const dataUrl = this.stationNub.getDataURL({
                          type: 'png',
                          pixelRatio: 2,
                          backgroundColor: '#fff'
                        });

                        try {
                          // 将 DataURL 转换为 Blob
                          const response = await fetch(dataUrl);
                          const blob = await response.blob();

                          // 使用 Clipboard API 复制图片
                          await navigator.clipboard.write([
                            new ClipboardItem({
                              [blob.type]: blob
                            })
                          ]);
                          this.$message.success('已复制');
                        } catch (err) {
                          this.$message.success('复制失败');
                        }
                      }
                    }
                  },
                  right: '0%',
                  top: '90%',
                  itemSize: 14,
                  itemGap: 10,
                  textStyle: {
                    fontSize: 11
                  },
                  iconStyle: {
                    borderColor: '#666',
                    borderWidth: 1,
                    backgroundColor: '#f5f5f5'
                  }
                }

              },
            }
            this.$nextTick(() => {
              if (!this.stationNub) {
                this.stationNub = echarts.init(this.$refs.stationNub);
              }
              this.stationNub.setOption(chartStationNub);
            });
            this.$nextTick(() => {
              if (!this.stationNubFinish) {
                this.stationNubFinish = echarts.init(this.$refs.stationNubFinish);
              }
              this.stationNubFinish.setOption(stationNubFinish);
            });
          }

        });
      }
    },
    // 页面用到的变量：用户选择看哪天的报警信息/
    // eslint-disable-next-line no-unused-vars
    dateOneDay(newVal,oldVal){
      let timeTemp=[]
        if (this.shiftType==='早班/morning Shift/Ранняя смена'){
          timeTemp=[this.dateOneDay+' 13:20:00',this.dateOneDay+' 22:20:00']
        }
        else if (this.shiftType==='中班/middle shift/Средний класс'){
          // 创建日期对象
          const date = new Date(newVal);

          // 创建两个时间点
          const startTime = new Date(date);
          startTime.setHours(17, 20, 0);

          const endTime = new Date(date);
          endTime.setDate(endTime.getDate() + 1); // 增加一天
          endTime.setHours(2, 20, 0);

          // 格式化为字符串
          const formatDate = (d) => {
            const year = d.getFullYear();
            const month = String(d.getMonth() + 1).padStart(2, '0');
            const day = String(d.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
          };

          timeTemp = [
            `${formatDate(startTime)} ${'22:20:00'}`,
            `${formatDate(endTime)} ${'07:20:00'}`
          ];
        }
        else if (this.shiftType==='夜班/night shift/Ночная работа'){
          // 创建日期对象
          const date = new Date(newVal);

          // 创建两个时间点
          const startTime = new Date(date);
          startTime.setHours(17, 20, 0);

          const endTime = new Date(date);
          endTime.setDate(endTime.getDate() + 1); // 增加一天
          endTime.setHours(2, 20, 0);

          // 格式化为字符串
          const formatDate = (d) => {
            const year = d.getFullYear();
            const month = String(d.getMonth() + 1).padStart(2, '0');
            const day = String(d.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
          };

          timeTemp = [
            `${formatDate(endTime)} ${'07:20:00'}`,
            `${formatDate(endTime)} ${'13:20:00'}`
          ];
        }
        if (timeTemp.length>0){
          //筛选，得到这段时间内的报警数据
          this.exceptionData=[]
          this.queryExceptionOneFiledScopeWorkExceptionRemoval('excDate',timeTemp[0],timeTemp[1]).then(data=>{
            this.exceptionData=data
            this.dateTimeScope=[]
            //建立一个变量，准备画图
            let chartStationNub = {
              title: {
                textStyle: {
                  color: '#333',
                  fontSize: 14
                },
                x: 'center',
                text: this.dateOneDay + '——' + this.shiftType + '报警数量趋势图',
              },
              xAxis: {
                type: 'category',
                data: [],
                axisLabel: {
                  rotate: 45,
                  fontSize: 11
                }
              },
              yAxis: {
                type: 'value',
                min: 0,
                max: 10,
                axisLabel: {
                  formatter: '{value}'
                }
              },
              series: [
                {
                  name: '故障数量',
                  type: 'bar',
                  data: [],
                  itemStyle: {
                    color: '#1890ff'
                  },
                  lineStyle: {
                    width: 2,
                    type: 'dashed'
                  },
                  label: {
                    show: true,
                    position: 'top',
                    color: '#333',
                    fontSize: 11,
                    formatter: '{c}'
                  }
                }
              ],
              grid: {
                top: '6%',
                left: '3%',
                right: '4%',
                bottom: '0%',
                containLabel: true
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  label: {
                    backgroundColor: '#6a7985'
                  }
                }
              },
              legend: {
                data: ['数量'],
                left: 'right',
                top: '0%',
                itemGap: 20,
                textStyle: {
                  color: '#333',
                  fontSize: 11
                }
              },
              toolbox: {
                feature: {
                  saveAsImage: {
                    type: 'png',
                    name: '报警数量趋势图',
                    title: '',
                    pixelRatio: 2,
                    backgroundColor: '#fff',
                    excludeComponents: ['toolbox']
                  },
                  myCopy: {
                    show: true,
                    title: '',
                    icon: 'path://M4 7v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V7h-2v10H6V7H4zm6-5.5L17 7h-3v3h-4V7H7l7-5.5z',
                    onclick: async () => {
                      if (!this.stationNub) {
                        alert('图表未初始化');
                        return;
                      }
                      // 清除选中状态
                      this.stationNub.dispatchAction({
                        type: 'unselect',
                        seriesIndex: 0
                      });

                      const dataUrl = this.stationNub.getDataURL({
                        type: 'png',
                        pixelRatio: 2,
                        backgroundColor: '#fff'
                      });

                      try {
                        // 将 DataURL 转换为 Blob
                        const response = await fetch(dataUrl);
                        const blob = await response.blob();

                        // 使用 Clipboard API 复制图片
                        await navigator.clipboard.write([
                          new ClipboardItem({
                            [blob.type]: blob
                          })
                        ]);
                        this.$message.success('已复制');
                      } catch (err) {
                        this.$message.success('复制失败');
                      }
                    }
                  }
                },
                right: '0%',
                top: '90%',
                itemSize: 14,
                itemGap: 10,
                textStyle: {
                  fontSize: 11
                },
                iconStyle: {
                  borderColor: '#666',
                  borderWidth: 1,
                  backgroundColor: '#f5f5f5'
                }
              }
            };
            //画图表，画出这段时间各个工序报警的数量，需要校验，是有数据的时候画图
            if (this.exceptionData.length>0){
              // 用于存储op值的统计结果
              const opCountMap = {};
              // 遍历数组，统计每个op值的出现次数
              this.exceptionData.forEach(item => {
                const op = item.op;
                if (opCountMap[op]) {
                  opCountMap[op]++;
                } else {
                  opCountMap[op] = 1;
                }
              });
              // 将统计结果转换为所需的格式
              const result = Object.keys(opCountMap).map(op => ({
                op: op,
                nub: opCountMap[op]
              }));
              result.sort((a, b) => b.nub - a.nub);
              for (let i = 0; i < result.length; i++) {
                //添加横坐标：
                chartStationNub.xAxis.data.push(result[i].op)
                //添加纵坐标：
                chartStationNub.series[0].data.push(result[i].nub)
              }
              //给Y坐标赋值
              chartStationNub.yAxis.max=result[0].nub+1
              //画出图像
              //进行画图，画出这段时间的趋势图
              this.$nextTick(() => {
                if (!this.stationNub) {
                  this.stationNub = echarts.init(this.$refs.stationNub)
                }
                //画故障数量的趋势图
                this.stationNub.setOption(chartStationNub)
              })
            }
            else {
              chartStationNub = {
                title: {
                  textStyle: {
                    color: '#333',
                    fontSize: 14
                  },
                  x: 'center',
                  text: this.dateOneDay+'——'+this.shiftType+'趋势图',
                },
                xAxis: {
                  type: 'category',
                  data: [],
                  axisLabel: {
                    rotate: 45,
                    fontSize: 11 // 添加字体大小设置
                  }
                },
                yAxis: {
                  type: 'value',
                  min: 0,
                  max: 10,
                  axisLabel: {
                    formatter: '{value}'
                  }
                },
                series: [
                  {
                    name: '故障数量',
                    type: 'bar',
                    data: [],
                    itemStyle: {
                      color: '#1890ff' // 将颜色改为青蓝色
                    },
                    lineStyle: {
                      width: 2,
                      type: 'dashed'
                    },
                    label: {
                      show: true, // 显示标签
                      position: 'top', // 标签显示在柱子上方
                      color: '#333', // 标签文字颜色
                      fontSize: 11, // 标签文字大小
                      formatter: '{c}' // 显示数据值
                    }
                  }
                ],
                grid: {
                  top: '6%',    // 为标题和图例留出空间
                  left: '3%',
                  right: '4%',
                  bottom: '0%',
                  containLabel: true
                },
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'cross',
                    label: {
                      backgroundColor: '#6a7985'
                    }
                  }
                },
                legend: {
                  data: ['数量'],
                  left: 'right', // 水平居中
                  top: '0%',     // 垂直位置
                  itemGap: 20,    // 图例项间距
                  textStyle: {
                    color: '#333',
                    fontSize: 11
                  }
                }
              }
              //画出图像
              //进行画图，画出这段时间的趋势图
              this.$nextTick(() => {
                if (!this.stationNub) {
                  this.stationNub = echarts.init(this.$refs.stationNub)
                }
                //画故障数量的趋势图
                this.stationNub.setOption(chartStationNub)
              })
            }
          })
        }
    },
    //页面用到的变量：用户选择看哪个班次的报警信息/
    // eslint-disable-next-line no-unused-vars
    shiftType(newVal){
      if (this.dateOneDay!=='' && this.dateOneDay!==undefined && this.dateOneDay!==null){
        let timeTemp=[]
        if (this.shiftType==='早班/morning Shift/Ранняя смена'){
          timeTemp=[this.dateOneDay+' 13:20:00',this.dateOneDay+' 22:20:00']
        }
        else if (this.shiftType==='中班/middle shift/Средний класс'){
          // 创建日期对象
          const date = new Date(this.dateOneDay);

          // 创建两个时间点
          const startTime = new Date(date);
          startTime.setHours(17, 20, 0);

          const endTime = new Date(date);
          endTime.setDate(endTime.getDate() + 1); // 增加一天
          endTime.setHours(2, 20, 0);

          // 格式化为字符串
          const formatDate = (d) => {
            const year = d.getFullYear();
            const month = String(d.getMonth() + 1).padStart(2, '0');
            const day = String(d.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
          };

          timeTemp = [
            `${formatDate(startTime)} ${'22:20:00'}`,
            `${formatDate(endTime)} ${'07:20:00'}`
          ];
        }
        else if (this.shiftType==='夜班/night shift/Ночная работа'){
          // 创建日期对象
          const date = new Date(this.dateOneDay);

          // 创建两个时间点
          const startTime = new Date(date);
          startTime.setHours(17, 20, 0);

          const endTime = new Date(date);
          endTime.setDate(endTime.getDate() + 1); // 增加一天
          endTime.setHours(2, 20, 0);

          // 格式化为字符串
          const formatDate = (d) => {
            const year = d.getFullYear();
            const month = String(d.getMonth() + 1).padStart(2, '0');
            const day = String(d.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
          };

          timeTemp = [
            `${formatDate(endTime)} ${'07:20:00'}`,
            `${formatDate(endTime)} ${'13:20:00'}`
          ];
        }
        if (timeTemp.length>0){
          this.exceptionData=[]
          this.queryExceptionOneFiledScopeWorkExceptionRemoval('excDate',timeTemp[0],timeTemp[1]).then(data=>{
            this.exceptionData=data
            this.dateTimeScope=[]
            //建立一个变量，准备画图
            let chartStationNub = {
              title: {
                textStyle: {
                  color: '#333',
                  fontSize: 14
                },
                x: 'center',
                text: this.dateOneDay + '——' + this.shiftType + '报警数量趋势图',
              },
              xAxis: {
                type: 'category',
                data: [],
                axisLabel: {
                  rotate: 45,
                  fontSize: 11
                }
              },
              yAxis: {
                type: 'value',
                min: 0,
                max: 10,
                axisLabel: {
                  formatter: '{value}'
                }
              },
              series: [
                {
                  name: '故障数量',
                  type: 'bar',
                  data: [],
                  itemStyle: {
                    color: '#1890ff'
                  },
                  lineStyle: {
                    width: 2,
                    type: 'dashed'
                  },
                  label: {
                    show: true,
                    position: 'top',
                    color: '#333',
                    fontSize: 11,
                    formatter: '{c}'
                  }
                }
              ],
              grid: {
                top: '6%',
                left: '3%',
                right: '4%',
                bottom: '0%',
                containLabel: true
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  label: {
                    backgroundColor: '#6a7985'
                  }
                }
              },
              legend: {
                data: ['数量'],
                left: 'right',
                top: '0%',
                itemGap: 20,
                textStyle: {
                  color: '#333',
                  fontSize: 11
                }
              },
              toolbox: {
                feature: {
                  saveAsImage: {
                    type: 'png',
                    name: '报警数量趋势图',
                    title: '',
                    pixelRatio: 2,
                    backgroundColor: '#fff',
                    excludeComponents: ['toolbox']
                  },
                  myCopy: {
                    show: true,
                    title: '',
                    icon: 'path://M4 7v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V7h-2v10H6V7H4zm6-5.5L17 7h-3v3h-4V7H7l7-5.5z',
                    onclick: async () => {
                      if (!this.stationNub) {
                        alert('图表未初始化');
                        return;
                      }
                      // 清除选中状态
                      this.stationNub.dispatchAction({
                        type: 'unselect',
                        seriesIndex: 0
                      });

                      const dataUrl = this.stationNub.getDataURL({
                        type: 'png',
                        pixelRatio: 2,
                        backgroundColor: '#fff'
                      });

                      try {
                        // 将 DataURL 转换为 Blob
                        const response = await fetch(dataUrl);
                        const blob = await response.blob();

                        // 使用 Clipboard API 复制图片
                        await navigator.clipboard.write([
                          new ClipboardItem({
                            [blob.type]: blob
                          })
                        ]);
                        this.$message.success('已复制');
                      } catch (err) {
                        this.$message.success('复制失败');
                      }
                    }
                  }
                },
                right: '0%',
                top: '90%',
                itemSize: 14,
                itemGap: 10,
                textStyle: {
                  fontSize: 11
                },
                iconStyle: {
                  borderColor: '#666',
                  borderWidth: 1,
                  backgroundColor: '#f5f5f5'
                }
              }
            };
            //画图表，画出这段时间各个工序报警的数量，需要校验，是有数据的时候画图
            if (this.exceptionData.length>0){
              // 用于存储op值的统计结果
              const opCountMap = {};
              // 遍历数组，统计每个op值的出现次数
              this.exceptionData.forEach(item => {
                const op = item.op;
                if (opCountMap[op]) {
                  opCountMap[op]++;
                } else {
                  opCountMap[op] = 1;
                }
              });
              // 将统计结果转换为所需的格式
              const result = Object.keys(opCountMap).map(op => ({
                op: op,
                nub: opCountMap[op]
              }));
              result.sort((a, b) => b.nub - a.nub);
              for (let i = 0; i < result.length; i++) {
                //添加横坐标：
                chartStationNub.xAxis.data.push(result[i].op)
                //添加纵坐标：
                chartStationNub.series[0].data.push(result[i].nub)
              }
              //给Y坐标赋值
              chartStationNub.yAxis.max=result[0].nub+1
              //画出图像
              //进行画图，画出这段时间的趋势图
              this.$nextTick(() => {
                if (!this.stationNub) {
                  this.stationNub = echarts.init(this.$refs.stationNub)
                }
                //画故障数量的趋势图
                this.stationNub.setOption(chartStationNub)
              })
            }
            else {
              chartStationNub = {
                title: {
                  textStyle: {
                    color: '#333',
                    fontSize: 14
                  },
                  x: 'center',
                  text: this.dateOneDay+'——'+this.shiftType+'趋势图',
                },
                xAxis: {
                  type: 'category',
                  data: [],
                  axisLabel: {
                    rotate: 45,
                    fontSize: 11 // 添加字体大小设置
                  }
                },
                yAxis: {
                  type: 'value',
                  min: 0,
                  max: 10,
                  axisLabel: {
                    formatter: '{value}'
                  }
                },
                series: [
                  {
                    name: '故障数量',
                    type: 'bar',
                    data: [],
                    itemStyle: {
                      color: '#1890ff' // 将颜色改为青蓝色
                    },
                    lineStyle: {
                      width: 2,
                      type: 'dashed'
                    },
                    label: {
                      show: true, // 显示标签
                      position: 'top', // 标签显示在柱子上方
                      color: '#333', // 标签文字颜色
                      fontSize: 11, // 标签文字大小
                      formatter: '{c}' // 显示数据值
                    }
                  }
                ],
                grid: {
                  top: '6%',    // 为标题和图例留出空间
                  left: '3%',
                  right: '4%',
                  bottom: '0%',
                  containLabel: true
                },
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'cross',
                    label: {
                      backgroundColor: '#6a7985'
                    }
                  }
                },
                legend: {
                  data: ['数量'],
                  left: 'right', // 水平居中
                  top: '0%',     // 垂直位置
                  itemGap: 20,    // 图例项间距
                  textStyle: {
                    color: '#333',
                    fontSize: 11
                  }
                }
              }
              //画出图像
              //进行画图，画出这段时间的趋势图
              this.$nextTick(() => {
                if (!this.stationNub) {
                  this.stationNub = echarts.init(this.$refs.stationNub)
                }
                //画故障数量的趋势图
                this.stationNub.setOption(chartStationNub)
              })
            }
          })
        }
      }
    },
    //页面用到的变量：用户要统计某一序某一段时间内的报警数量
    dateTimeScopeOp(newVal){
      //需要筛选出后两天的报警信息才对
      // 将日期字符串转换为 Date 对象
      const addTwoNewVal = new Date(newVal[1]);

      // 检查日期是否有效
      if (isNaN(addTwoNewVal.getTime())) {
        throw new Error("Invalid date string");
      }
      // 增加一天
      addTwoNewVal.setDate(addTwoNewVal.getDate() + 2);
      // 格式化日期为字符串
      const year = addTwoNewVal.getFullYear();
      const month = String(addTwoNewVal.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始
      const day = String(addTwoNewVal.getDate()).padStart(2, '0');
      const hours = String(addTwoNewVal.getHours()).padStart(2, '0');
      const minutes = String(addTwoNewVal.getMinutes()).padStart(2, '0');
      const seconds = String(addTwoNewVal.getSeconds()).padStart(2, '0');

      const addTwoNewValStr= `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      this.queryExceptionOneFiledScopeWorkExceptionRemoval('excDate', newVal[0], addTwoNewValStr).then(data => {
        //得到数量
        if (this.opType!=='' && this.opType!==null && this.opType!==undefined){
          let exceptionMorningData=data.filter(item=>{
            return item.op===this.opType
          })
          //设定画图的变量，包括了全部、早班、中班、夜班
          let chartStationNubOp = {
            title: {
              textStyle: {
                color: '#333',
                fontSize: 14
              },
              x: 'center',
              text: this.dateTimeScope[0] + '——' + this.dateTimeScope[1] + '报警数量趋势图',
            },
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                rotate: 45,
                fontSize: 11
              }
            },
            yAxis: {
              type: 'value',
              min: 0,
              max: 10,
              axisLabel: {
                formatter: '{value}'
              }
            },
            series: [
              {
                name: '全天数量',
                type: 'bar',
                data: [],
                itemStyle: {
                  color: '#1890ff'
                },
                lineStyle: {
                  width: 2,
                  type: 'dashed'
                },
                label: {
                  show: true,
                  position: 'top',
                  color: '#333',
                  fontSize: 11,
                  formatter: '{c}'
                }
              },
              {
                name: '早班数量',
                type: 'bar',
                data: [],
                itemStyle: {
                  color: '#5470C6'
                },
                lineStyle: {
                  width: 2,
                  type: 'dashed'
                },
                label: {
                  show: true,
                  position: 'top',
                  color: '#333',
                  fontSize: 11,
                  formatter: '{c}'
                }
              },
              {
                name: '中班数量',
                type: 'bar',
                data: [],
                itemStyle: {
                  color: '#91CC75'
                },
                lineStyle: {
                  width: 2,
                  type: 'dashed'
                },
                label: {
                  show: true,
                  position: 'top',
                  color: '#333',
                  fontSize: 11,
                  formatter: '{c}'
                }
              },
            ],
            grid: {
              top: '6%',
              left: '3%',
              right: '4%',
              bottom: '0%',
              containLabel: true
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            legend: {
              data: ['全天数量', '早班数量', '中班数量'],
              left: 'right',
              top: '0%',
              itemGap: 20,
              textStyle: {
                color: '#333',
                fontSize: 11
              },
              selected: {
                '全天数量': true,
                '早班数量': true,
                '中班数量': true
              },
              toolbox: {
                feature: {
                  saveAsImage: {
                    type: 'png',
                    name: '报警数量趋势图',
                    title: '',
                    pixelRatio: 2,
                    backgroundColor: '#fff',
                    excludeComponents: ['toolbox']
                  },
                  myCopy: {
                    show: true,
                    title: '',
                    icon: 'path://M4 7v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V7h-2v10H6V7H4zm6-5.5L17 7h-3v3h-4V7H7l7-5.5z',
                    onclick: async () => {
                      if (!this.stationNub) {
                        alert('图表未初始化');
                        return;
                      }
                      // 清除选中状态
                      this.stationNub.dispatchAction({
                        type: 'unselect',
                        seriesIndex: 0
                      });

                      const dataUrl = this.stationNub.getDataURL({
                        type: 'png',
                        pixelRatio: 2,
                        backgroundColor: '#fff'
                      });

                      try {
                        // 将 DataURL 转换为 Blob
                        const response = await fetch(dataUrl);
                        const blob = await response.blob();

                        // 使用 Clipboard API 复制图片
                        await navigator.clipboard.write([
                          new ClipboardItem({
                            [blob.type]: blob
                          })
                        ]);
                        this.$message.success('已复制');
                      } catch (err) {
                        this.$message.success('复制失败');
                      }
                    }
                  }
                },
                right: '0%',
                top: '90%',
                itemSize: 14,
                itemGap: 10,
                textStyle: {
                  fontSize: 11
                },
                iconStyle: {
                  borderColor: '#666',
                  borderWidth: 1,
                  backgroundColor: '#f5f5f5'
                }
              }

            },
          }
          //画出故障总的趋势图,先画不分分班次的，进行赋值，先得到每天的时间数组
          let generateNo=this.generateDateRange(newVal[0],newVal[1],'')
          // 进行相关数据赋值(全部数据）
          for (let i = 0; i < generateNo.length; i++) {
            // 筛选，计算每天出现的数量
            let excOpNumb = exceptionMorningData.filter(item => {
              const excDate = new Date(item.excDate);
              const startDate = new Date(generateNo[i].start);
              const endDate = new Date(generateNo[i].end);

              return excDate >= startDate && excDate <= endDate;
            });
            //先做X轴，做一次就好了，其他班次的就不需要做了
            chartStationNubOp.xAxis.data.push(generateNo[i].start.slice(0,10))
            //给数据赋值
            chartStationNubOp.series[0].data.push(excOpNumb.length.toString())
            //得到y轴的最大值,只做一次
            // 将字符串数组转换为数字数组
            const numbers = chartStationNubOp.series[0].data.map(Number);

            // 找到最大值,给Y轴
            chartStationNubOp.yAxis.max = (Math.max(...numbers)+Math.ceil(Math.max(...numbers)*0.15)).toString();
          }

          //  画出故障总的趋势图,画出早班的报警信息，进行赋值
          //进行相关数据赋值（早班）
          let generateMorning=this.generateDateRange(newVal[0],newVal[1],'早班/morning Shift/Ранняя смена')
          // 进行相关数据赋值(早班）
          for (let i = 0; i < generateMorning.length; i++) {
            // 筛选，计算每天出现的数量
            let excOpNumb = exceptionMorningData.filter(item => {
              const excDate = new Date(item.excDate);
              const startDate = new Date(generateMorning[i].start);
              const endDate = new Date(generateMorning[i].end);
              return excDate >= startDate && excDate <= endDate;
            });
            //给数据赋值
            chartStationNubOp.series[1].data.push(excOpNumb.length.toString())
          }

          //画出故障总的趋势图,画出早班的报警信息，进行赋值，先得到每天的时间数组
          //进行相关数据赋值（中班）
          let generateMiddle=this.generateDateRange(newVal[0],newVal[1],'中班/middle shift/Средний класс')
          // 进行相关数据赋值(全部数据）
          for (let i = 0; i < generateMiddle.length; i++) {
            // 筛选，计算每天出现的数量
            let excOpNumb = exceptionMorningData.filter(item => {
              const excDate = new Date(item.excDate);
              const startDate = new Date(generateMiddle[i].start);
              const endDate = new Date(generateMiddle[i].end);
              return excDate >= startDate && excDate <= endDate;
            });
            //给数据赋值
            chartStationNubOp.series[2].data.push(excOpNumb.length.toString())
          }
          //画出图
          this.$nextTick(() => {
            if (!this.stationNubOp) {
              this.stationNubOp = echarts.init(this.$refs.stationNubOp);
            }
            this.stationNubOp.setOption(chartStationNubOp);
          });
        }
        else {
          this.$message.error('请选择工序')
        }
      });
    },
    //页面用到的变量：用户要查看是哪一个工序下的报警信息
    opType(newVal){
      console.log(newVal)
      //需要筛选出后两天的报警信息才对
      // 将日期字符串转换为 Date 对象
      if (this.dateTimeScopeOp.length===0){
        this.$message.error('请选择时间段')
        return
      }
      //去画图，和工序时间的变化是一样
      const addTwoNewVal = new Date(this.dateTimeScopeOp[1]);
      // 检查日期是否有效
      if (isNaN(addTwoNewVal.getTime())) {
        throw new Error("Invalid date string");
      }
      // 增加一天
      addTwoNewVal.setDate(addTwoNewVal.getDate() + 2);
      // 格式化日期为字符串
      const year = addTwoNewVal.getFullYear();
      const month = String(addTwoNewVal.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始
      const day = String(addTwoNewVal.getDate()).padStart(2, '0');
      const hours = String(addTwoNewVal.getHours()).padStart(2, '0');
      const minutes = String(addTwoNewVal.getMinutes()).padStart(2, '0');
      const seconds = String(addTwoNewVal.getSeconds()).padStart(2, '0');

      const addTwoNewValStr= `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      this.queryExceptionOneFiledScopeWorkExceptionRemoval('excDate', this.dateTimeScopeOp[0], addTwoNewValStr).then(data => {
        //得到数量
        if (this.opType!=='' && this.opType!==null && this.opType!==undefined){
          let exceptionMorningData=data.filter(item=>{
            return item.op===this.opType
          })
          //设定画图的变量，包括了全部、早班、中班、夜班
          let chartStationNubOp = {
            title: {
              textStyle: {
                color: '#333',
                fontSize: 14
              },
              x: 'center',
              text: this.dateTimeScopeOp[0] + '——' + this.dateTimeScopeOp[1] + '报警数量趋势图',
            },
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                rotate: 45,
                fontSize: 11
              }
            },
            yAxis: {
              type: 'value',
              min: 0,
              max: 10,
              axisLabel: {
                formatter: '{value}'
              }
            },
            series: [
              {
                name: '全天数量',
                type: 'bar',
                data: [],
                itemStyle: {
                  color: '#1890ff'
                },
                lineStyle: {
                  width: 2,
                  type: 'dashed'
                },
                label: {
                  show: true,
                  position: 'top',
                  color: '#333',
                  fontSize: 11,
                  formatter: '{c}'
                }
              },
              {
                name: '早班数量',
                type: 'bar',
                data: [],
                itemStyle: {
                  color: '#5470C6'
                },
                lineStyle: {
                  width: 2,
                  type: 'dashed'
                },
                label: {
                  show: true,
                  position: 'top',
                  color: '#333',
                  fontSize: 11,
                  formatter: '{c}'
                }
              },
              {
                name: '中班数量',
                type: 'bar',
                data: [],
                itemStyle: {
                  color: '#91CC75'
                },
                lineStyle: {
                  width: 2,
                  type: 'dashed'
                },
                label: {
                  show: true,
                  position: 'top',
                  color: '#333',
                  fontSize: 11,
                  formatter: '{c}'
                }
              },
            ],
            grid: {
              top: '6%',
              left: '3%',
              right: '4%',
              bottom: '0%',
              containLabel: true
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            legend: {
              data: ['全天数量', '早班数量', '中班数量'],
              left: 'right',
              top: '0%',
              itemGap: 20,
              textStyle: {
                color: '#333',
                fontSize: 11
              },
              selected: {
                '全天数量': true,
                '早班数量': true,
                '中班数量': true
              },
              toolbox: {
                feature: {
                  saveAsImage: {
                    type: 'png',
                    name: '报警数量趋势图',
                    title: '',
                    pixelRatio: 2,
                    backgroundColor: '#fff',
                    excludeComponents: ['toolbox']
                  },
                  myCopy: {
                    show: true,
                    title: '',
                    icon: 'path://M4 7v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V7h-2v10H6V7H4zm6-5.5L17 7h-3v3h-4V7H7l7-5.5z',
                    onclick: async () => {
                      if (!this.stationNub) {
                        alert('图表未初始化');
                        return;
                      }
                      // 清除选中状态
                      this.stationNub.dispatchAction({
                        type: 'unselect',
                        seriesIndex: 0
                      });

                      const dataUrl = this.stationNub.getDataURL({
                        type: 'png',
                        pixelRatio: 2,
                        backgroundColor: '#fff'
                      });

                      try {
                        // 将 DataURL 转换为 Blob
                        const response = await fetch(dataUrl);
                        const blob = await response.blob();

                        // 使用 Clipboard API 复制图片
                        await navigator.clipboard.write([
                          new ClipboardItem({
                            [blob.type]: blob
                          })
                        ]);
                        this.$message.success('已复制');
                      } catch (err) {
                        this.$message.success('复制失败');
                      }
                    }
                  }
                },
                right: '0%',
                top: '90%',
                itemSize: 14,
                itemGap: 10,
                textStyle: {
                  fontSize: 11
                },
                iconStyle: {
                  borderColor: '#666',
                  borderWidth: 1,
                  backgroundColor: '#f5f5f5'
                }
              }

            },
          }
          //画出故障总的趋势图,先画不分分班次的，进行赋值，先得到每天的时间数组
          let generateNo=this.generateDateRange(this.dateTimeScopeOp[0],this.dateTimeScopeOp[1],'')
          // 进行相关数据赋值(全部数据）
          for (let i = 0; i < generateNo.length; i++) {
            // 筛选，计算每天出现的数量
            let excOpNumb = exceptionMorningData.filter(item => {
              const excDate = new Date(item.excDate);
              const startDate = new Date(generateNo[i].start);
              const endDate = new Date(generateNo[i].end);
              return excDate >= startDate && excDate <= endDate;
            });
            //先做X轴，做一次就好了，其他班次的就不需要做了
            chartStationNubOp.xAxis.data.push(generateNo[i].start.slice(0,10))
            //给数据赋值
            chartStationNubOp.series[0].data.push(excOpNumb.length.toString())
            //得到y轴的最大值,只做一次
            // 将字符串数组转换为数字数组
            const numbers = chartStationNubOp.series[0].data.map(Number);

            // 找到最大值,给Y轴
            chartStationNubOp.yAxis.max = (Math.max(...numbers)+Math.ceil(Math.max(...numbers)*0.15)).toString();
          }

          //  画出故障总的趋势图,画出早班的报警信息，进行赋值
          //进行相关数据赋值（早班）
          let generateMorning=this.generateDateRange(this.dateTimeScopeOp[0],this.dateTimeScopeOp[1],'早班/morning Shift/Ранняя смена')
          // 进行相关数据赋值(早班）
          for (let i = 0; i < generateMorning.length; i++) {
            // 筛选，计算每天出现的数量
            let excOpNumb = exceptionMorningData.filter(item => {
              const excDate = new Date(item.excDate);
              const startDate = new Date(generateMorning[i].start);
              const endDate = new Date(generateMorning[i].end);
              return excDate >= startDate && excDate <= endDate;
            });
            //给数据赋值
            chartStationNubOp.series[1].data.push(excOpNumb.length.toString())
          }

          //画出故障总的趋势图,画出早班的报警信息，进行赋值，先得到每天的时间数组
          //进行相关数据赋值（中班）
          let generateMiddle=this.generateDateRange(this.dateTimeScopeOp[0],this.dateTimeScopeOp[1],'中班/middle shift/Средний класс')
          // 进行相关数据赋值(全部数据）
          for (let i = 0; i < generateMiddle.length; i++) {
            // 筛选，计算每天出现的数量
            let excOpNumb = exceptionMorningData.filter(item => {
              const excDate = new Date(item.excDate);
              const startDate = new Date(generateMiddle[i].start);
              const endDate = new Date(generateMiddle[i].end);
              return excDate >= startDate && excDate <= endDate;
            });
            //给数据赋值
            chartStationNubOp.series[2].data.push(excOpNumb.length.toString())
          }
          //画出图
          this.$nextTick(() => {
            if (!this.stationNubOp) {
              this.stationNubOp = echarts.init(this.$refs.stationNubOp);
            }
            this.stationNubOp.setOption(chartStationNubOp);
          });
        }
        else {
          this.$message.error('请选择工序')
        }
      });
    }
  },
  methods: {
    //退出登录
    logOut(){
      localStorage.removeItem('u_token');
      localStorage.removeItem('userName')
      this.$router.push('UserLogin')
    },
    //通用，语言选择
    chooseLanguage(language){
      this.languageS=language
      if (language==='chinese'){
        //main
        this.main.qualityManagementSystem='俄动力质量管理系统'
        this.main.alarmRelease='报警/故障解除业务'
        //pageVal
        this.pageVal.measuringToolsList.order='序号'
      }
      else if (language==='english') {
        //main
        this.main.qualityManagementSystem='Quality Management System'
        this.main.alarmRelease='Alarm/Fault Release'
        //pageVal
        this.pageVal.measuringToolsList.order='Order'
      }
      else if (language==='russian') {
        //main
        this.main.qualityManagementSystem='Система управления качеством'
        this.main.alarmRelease='Освобождение/Oшибка тревоги'
        //pageVal
        this.pageVal.measuringToolsList.order='Заказ'
      }
    },
    //查询用户信息的函数
    inquiry(){
      //输入用户编号，向后端查询信息
      const useId=localStorage.getItem('userName').replace(/"/g, '');
      this.$request.post('/useQueryPower',{
        queryFiledName:'changeModel',
        userId:useId,
      }).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }else {
          this.useName=result.data.name
          this.usePower=result.data.changeModel
          this.useId=useId
        }
      })
    },
    // 通用，弹窗关闭的时候
    //无意关闭弹窗的函数
    handleClose(done) {
      this.$confirm('确认关闭？')
          // eslint-disable-next-line no-unused-vars
          .then(_ => {
            done();
          })
          // eslint-disable-next-line no-unused-vars
          .catch(_ => {});
    },
    //在tab控件上单击的函数
    handleClick(tab, event) {
      console.log(tab, event);
      if (this.activeName==='exception'){
        this.$nextTick(() => {
          // 如果需要对数据进行深拷贝来触发更新，可以考虑如下方式
          this.exceptionData = _.cloneDeep(this.exceptionData);
        })
      }
    },
    //选择主导航上的不同按钮
    buttonMainSelect(doe){
      this.buttonDoe=doe
      if (doe===1){
          this.buttonBackColor1='blue'//按钮的背景颜色
          this.buttonColor1='white'//按钮的字体颜色
          this.buttonBackColor2=''//按钮的背景颜色
          this.buttonColor2=''//按钮的字体颜色
          this.buttonBackColor3=''//按钮的背景颜色
          this.buttonColor3=''//按钮的字体颜色
          this.buttonBackColor4=''//按钮的背景颜色
          this.buttonColor4=''//按钮的字体颜色
      }
      if (doe===2){
        this.buttonBackColor1=''//按钮的背景颜色
            this.buttonColor1=''//按钮的字体颜色
        this.buttonBackColor2='blue'//按钮的背景颜色
        this.buttonColor2='white'//按钮的字体颜色
        this.buttonBackColor3=''//按钮的背景颜色
        this.buttonColor3=''//按钮的字体颜色
        this.buttonBackColor4=''//按钮的背景颜色
        this.buttonColor4=''//按钮的字体颜色
      }
      if (doe===3){
        this.buttonBackColor1=''//按钮的背景颜色
        this.buttonColor1=''//按钮的字体颜色
        this.buttonBackColor2=''//按钮的背景颜色
        this.buttonColor2=''//按钮的字体颜色
        this.buttonBackColor3='blue'//按钮的背景颜色
        this.buttonColor3='white'//按钮的字体颜色
        this.buttonBackColor4=''//按钮的背景颜色
        this.buttonColor4=''//按钮的字体颜色
      }
      if (doe===4){
        this.buttonBackColor1=''//按钮的背景颜色
        this.buttonColor1=''//按钮的字体颜色
        this.buttonBackColor2=''//按钮的背景颜色
        this.buttonColor2=''//按钮的字体颜色
        this.buttonBackColor3=''//按钮的背景颜色
        this.buttonColor3=''//按钮的字体颜色
        this.buttonBackColor4='blue'//按钮的背景颜色
        this.buttonColor4='white'//按钮的字体颜色
      }
    },
    //电脑端增加一条报警/异常记录的显示函数 1：新增；2：编辑；3：删除；
    editExceptionShow(doe,copse){
      this.exceptionDataScope=copse
      this.exceptionDoe=doe
      //是新增一个设备异常/报警
      if (doe===1){
        this.exceptionForm={
          id:null,//主键
          establishTime:'',//创建时间
          updateTime:'',//修改时间
          deleteSign:1,//删除标记
          editName:this.useName+'/'+this.useId,//编辑人
          workShop:'',//车间名称，三种语言
          lineName:'',//线体名称
          op:'',//工序号
          excMessage:'',//报警信息
          excDate:'',//报警时间
          excPersonName:this.useName,//报警反馈人
          excType:0,//报警类别
          isProblem: -1,
          downTimeOp: 0,
          downTimeLine:0,
        }
        this.titleUse='新增一项异常/报警信息'
        this.exceptionDialog=true
      }
      //是编辑一个设备异常/报警
      if (doe===2){
        this.exceptionForm=copse.row
        this.exceptionDialog=true
      }
    },
    //编辑、新增报警、异常信息，点击确定提交按钮
    exceptionEdit(){
      //判断数据
      if (this.exceptionForm.workShop===null || this.exceptionForm.workShop===undefined || this.exceptionForm.workShop===''){
        this.$message.error('请选择车间名称')
        return
      }
      else if (this.exceptionForm.lineName===null || this.exceptionForm.lineName===undefined || this.exceptionForm.lineName===''){
        this.$message.error('请选择线体名称')
        return;
      }
      else if (this.exceptionForm.op=== null || this.exceptionForm.op===undefined || this.exceptionForm.op===''){
        this.$message.error('请选择工序号')
        return;
      }
      else if (this.exceptionForm.excDate===null || this.exceptionForm.excDate===undefined || this.exceptionForm.excDate===''){
        this.$message.error('请选择发生日期')
        return;
      }
      else if (this.exceptionForm.excPersonName===null || this.exceptionForm.excPersonName===undefined || this.exceptionForm.excPersonName===''){
        this.$message.error('请输入反馈人')
        return;
      }
      //组合数据
      this.exceptionForm.editName=this.useName+'/'+this.useId
      //向后端发送信息，是新增
      if (this.exceptionDoe===1){
        //组合数据，把报警时间更改为date格式
        this.exceptionForm.excDate.replace(' ', 'T');
        this.exceptionForm.excDate=new Date(this.exceptionForm.excDate)
        this.$request.post('excInsertWorkExceptionRemoval',this.exceptionForm).then(result=>{
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          } else {
            if (result.data==='' || result.data===null || result.data===undefined){
              this.$message.error('信息错误，请联系管理员')

            }
            else {
              this.exceptionData=result.data
              this.exceptionDialog=false
            }
          }
        })
      }
      //向后端发送信息，是修改
      if (this.exceptionDoe===2){
        //组合数据，把报警时间更改为date格式
        this.exceptionForm.excDate.replace(' ', 'T');
        this.exceptionForm.excDate=new Date(this.exceptionForm.excDate)
        this.exceptionForm.editName=this.useName+'/'+this.useId
        //向后端传输数据，修改一行报警信息
        this.$request.post('excEditOneRowWorkExceptionRemoval',this.exceptionForm).then(result=>{
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          } else {
            if (result.data==='' || result.data===null || result.data===undefined){
              this.$message.error('信息错误，请联系管理员')

            }
            else {
              this.$message.success('修改成功')
              this.exceptionData.splice(this.exceptionDataScope.$index,1,this.exceptionForm)
              this.exceptionDialog=false
            }
          }
        })
      }
    },
    //辅助函数：对报警/异常信息表中，对一个日期类型的数据，筛选≥某一个值，和＜某一个值，
    queryExceptionOneFiledScopeWorkExceptionRemoval(filedName,minVal,maxVal){
      return new Promise((resolve, reject) => {
        this.$request.post('/queryExceptionOneFiledScopeWorkExceptionRemoval',{
          filedName:filedName,
          minVal:minVal,
          maxVal:maxVal
        }).then(result => {
          if (result.code === 401) {
            this.$router.push('UserLogin');
            alert("您未登录，请登录");
            reject("未登录"); // 返回错误信息
          } else {
            resolve(result.data); // 返回数据
          }
        }).catch(error => {
          reject(error); // 捕获请求错误
        });
      });
    },
    // 获取当前时间
    getCurrentTimeInBeijing() {
    const now = new Date();

    // 格式化日期和时间
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');

  // 格式化为 yyyy-MM-dd HH:mm:ss
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
},

    // 创建时间数组
    createTimeArray() {
    const beijingTime =this.getCurrentTimeInBeijing();
  // 提取年月日
    const [year, month, day] = beijingTime.split(' ')[0].split('-');

  // 创建时间数组
    return [
    `${year}-${month}-${day} 08:20:00`,
    `${year}-${month}-${day} 17:20:00`
  ];
},
    // 创建时间数组，一个月周期的,用户输入一个字符串的日期，输入一个需要计算的天数，输入一个itme，是一个时间格式，‘HH：mm：ss’，最后得到一个数组，是用户输入的时间，和计算后的时间，是日期、时间的字符串格式，小的放在前面，大的放在后面；
    createTimeArrayOneMonthly(date, day, time) {
      let dateTime = new Date(date);
      // 创建新的日期对象，避免修改原日期
      let newDateTime = new Date(dateTime);
      // 正确减去天数
      newDateTime.setDate(newDateTime.getDate() - day);

      // 格式化日期和时间
      const formatDateTime = (dt) => {
        const year = dt.getFullYear();
        const month = String(dt.getMonth() + 1).padStart(2, '0');
        const day = String(dt.getDate()).padStart(2, '0');
        return `${year}-${month}-${day} ${time}`;
      };

      return [
        formatDateTime(newDateTime),
        formatDateTime(dateTime),

      ];
    },
    //输入日期区间，以及班次，返回得到这个班次的时间区间数组
    generateDateRange(startDateStr, endDateStr,shift) {
      // 将输入的日期字符串转换为Date对象
      const startDate = new Date(startDateStr);
      const endDate = new Date(endDateStr);
      // 验证日期是否有效
      if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
        throw new Error('Invalid date format');
      }

      // 初始化结果数组
      const dateArray = [];

      // 循环生成日期
      let currentDate = new Date(startDate);
      currentDate.setDate(currentDate.getDate() + 1); // 设置为 startDate 的下一天

      // 创建结束日期的后两天的Date对象
      const endDatePlusTwo = new Date(endDate);
      endDatePlusTwo.setDate(endDate.getDate() + 2);

      while (currentDate <= endDatePlusTwo) {
        // 格式化日期为 YYYY-MM-DD
        const formattedDate = currentDate.toISOString().split('T')[0];
        dateArray.push(formattedDate);

        // 增加一天
        currentDate.setDate(currentDate.getDate() + 1);
      }

      let dateArrayShift = [];
      if (shift === '' || shift === null || shift === undefined) {
        for (let i = 0; i < dateArray.length - 1; i++) {
          let temp = { start: dateArray[i] + ' 13:20:00', end: dateArray[i + 1] + ' 13:20:00' };
          dateArrayShift.push(temp);
        }
      } else if (shift === '早班/morning Shift/Ранняя смена') {
        for (let i = 0; i < dateArray.length; i++) {
          let temp = { start: dateArray[i] + ' 13:20:00', end: dateArray[i] + ' 22:20:00' };
          dateArrayShift.push(temp);
        }
      } else if (shift === '中班/middle shift/Средний класс') {
        for (let i = 0; i < dateArray.length-1; i++) {
          let temp = { start: dateArray[i] + ' 22:20:00', end: dateArray[i + 1] + ' 07:20:00' };
          dateArrayShift.push(temp);
        }
      } else if (shift === '夜班/night shift/Ночная работа') {
        for (let i = 0; i < dateArray.length-1; i++) {
          let temp = { start: dateArray[i + 1] + ' 07:20:00', end: dateArray[i + 1] + ' 13:20:00' };
          dateArrayShift.push(temp);
        }
      }
      return dateArrayShift;
    },
  },

  mounted() {
    this.inquiry()
    this.dateTimeScope=this.createTimeArray()
    this.dateTimeScopeOp=this.createTimeArrayOneMonthly(this.dateTimeScope[0].slice(0,10),30,'08:20:20')
    this.opType='OP500'
  },
  //组件销毁前的函数
  beforeDestroy() {
    // 组件销毁前，销毁 wangEditor 实例
    if (this.editor) {
      this.editor.destroy();
      this.editor = null;
    }
  },

}
</script>

<style scoped>
/* 主体左侧的工作步骤栏用到的数据包围的div的样式*/

.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  border-left-color: white;
  border-top: white;
}

.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  height: 89vh;
}

.el-main {
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-left-color: white;
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.headMain{
  color: #ffffff; /* 设置字体颜色为红色 */
  font-size: 18px;
}
.center-text {
  /* 使用 margin-left 和 margin-right auto 来实现居中效果 */
  margin-left: auto;
  margin-right: auto;
  /* 注意：如果 header 内只有这两个元素，你可能不需要 margin-right: auto */
}

/*自定义样式*/

.blue-border {
  border-collapse: collapse; /* 合并相邻的边框 */
  width: 100%; /* 设置表格宽度为100% */
}

.blue-border th,
.blue-border td {
  border: 1px solid blue; /* 设置边框颜色为蓝色，宽度为1px */
  padding: 8px; /* 设置单元格内边距，以使内容更清晰可见 */
}

/* 如果你只想为thead和tbody中的单元格设置边框，可以分别指定 */
.blue-border thead th,
.blue-border tbody td {
  /* 这里可以添加额外的thead或tbody特定的样式 */
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.dialog-footer {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中（如果按钮不是单行的话）*/
  padding: 10px; /* 你可以根据需要调整内边距 */
}
</style>